/* eslint-disable prefer-promise-reject-errors */
import React from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Layout, Divider } from 'antd';
import { LoginModal } from './LoginModal';
import { RegisterModal } from './RegisterModal';
import { ResetModal } from './ResetModal';
import './index.local.sass';


export const Header = observer(() => {
  const state = useLocalStore(() => ({
    LoginModal: {
      visible: false,
    },
    RegisterModal: {
      visible: false,
    },
    ResetModal: {
      visible: false,
    },
  }));

  const login = () => {
    state.LoginModal.visible = true;
  };

  const register = () => {
    state.RegisterModal.visible = true;
  };

  return (
    <Layout.Header className="flex items-center justify-between bg-white p-0">
      <img
        src="/logo_full.png"
        className={'logo_full ml-4'}
      />

      <div className="flex mr-4">
        <a onClick={login}>Log in</a>
        <Divider type="vertical" style={{ margin: '26px 20px' }} />
        <a onClick={register}>Register</a>
      </div>

      {
        state.LoginModal.visible
        && <LoginModal
          state={state.LoginModal}
          registerModal={state.RegisterModal}
          resetModal={state.ResetModal}
        />
      }

      {
        state.RegisterModal.visible
        && <RegisterModal
          state={state.RegisterModal}
        />
      }

      {
        state.ResetModal.visible
        && <ResetModal
          state={state.ResetModal}
        />
      }
    </Layout.Header>
  );
});
